{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block head %}
{{ super() }}
<script src="{{ url_for('main.static', filename='highcharts.js') }}"></script>
<script src="{{ url_for('main.static', filename='chartkick.js') }}"></script>
{% endblock %}


{% block title %} 洞察 {% endblock %}

{% block page_content %}
<div class="page-header">
	<h1>仪表盘</h1>
</div>



    <div style="width:90%">
    <h3>漏洞类型</h3>
                <div>
                    {% area_chart data_vul_type %}  
                 <!--   {% bar_chart data_vul_type %}  -->
                <!--    {% line_chart data_vul_type with style="width:200px; height:20px;" %} -->
                </div>
    </div>


    <legend></legend>



    <div style="width:90%">
    <h3>漏洞({{ count_vul }})状态</h3>
                <div>
                    {% pie_chart data_vul_status with id='chart-1' height='400px' %}
                </div>
    </div>


    <legend></legend>


    <div style="width:90%">
    <h3>漏洞来源</h3>
                <div>
                    {% pie_chart data_vul_source with id='chart-2' height='400px' %}
                </div>
    </div>


    <legend></legend>



    <div style="width:90%">
    <h3>资产({{ count_asset }})漏洞数量</h3>
                <div>
                    {% line_chart data_related_asset with style="width:200px; height:20px;" %}
                </div>
    </div>


    <legend></legend>


    <div style="width:90%">
    <h3>资产({{ count_asset_timeout }})逾期已修复漏洞数量</h3>
                <div>
                    {% line_chart data_related_asset_timeout with style="width:200px; height:20px;" %}
                </div>
    </div>


    <legend></legend>


    <div style="width:90%">
    <h3>资产({{ count_asset_timeout_unfinish }})逾期未修复漏洞数量</h3>
                <div>
                    {% line_chart data_related_asset_timeout_unfinish with style="width:200px; height:20px;" %}
                </div>
    </div>


    <legend></legend>


    <div style="width:90%">
    <h3>部门漏洞数量</h3>
                <div>
                    {% column_chart data_department_vul %}
                </div>
    </div>


    <legend></legend>


    <div style="width:90%">
    <h3>部门未修复漏洞数量</h3>
                <div>
                    {% column_chart data_department_risk_vul %}
                </div>
    </div>


    <legend></legend>


    <div style="width:90%">
    <h3>部门剩余风险</h3>
                <div>
                    {% column_chart data_department_residual_risk %}
                </div>
    </div>


    <legend></legend>  


<!--

{% column_chart data_vul_type with min=400 max=1000 %}

{% bar_chart data_vul_type %}

{% area_chart data_vul_type %}
-->

{% endblock %}
